<script lang="ts" setup>
    import { ref, reactive, watch } from 'vue';
    import ChooseIndex from './ChooseIndex/index.vue'
    import CollectIndex from './CollectIndex/index.vue'
    const emit = defineEmits(['handleIndex', 'mouseLeave'])
    const tabKey = ref<string>('chooseIndex')   
    const props = defineProps({
        groupId: {
            type: String || Boolean || undefined
        }
    })
    const groupTree = ref<any>([])
    const clickTreeNode = (v:any) => {
        emit('handleIndex', v)
    }
    const clickCollectTreeNode = (v:any) => {
        emit('handleIndex', v)
    } 



</script>


<template>
    <div
     class="change-cards"
    >
    <a-tabs v-model:active-key="tabKey">
        <a-tab-pane key="chooseIndex" title="可选指标"></a-tab-pane>
        <a-tab-pane key="collectIndex" title="收藏指标"></a-tab-pane>
    </a-tabs>
    <choose-index 
        v-if="tabKey === 'chooseIndex'" 
        :groupId="groupId"
        @handleIndex="clickTreeNode"
    ></choose-index>
    <collect-index 
        v-if="tabKey === 'collectIndex'" 
        @handleIndex="clickCollectTreeNode"
    ></collect-index>
    </div>
</template>

<style lang="scss" scoped>
.change-cards {
    :deep(.arco-tabs-content) {
        padding-top: 0;
    }
}


</style>